
import React, { Component, createRef } from "react";
import type { ReactNode } from 'react'



interface iState {
}
interface iProps {
    title: string
}

/*
    高阶组件(HOC): 就是一个普通函数，该函数的参数是一个组件，会返回一个新的组件(新组件就是新功能)
    1. 可以将一些重复使用的数据或者函数放在一个高阶组件中
    2. 使用的时候，可以直接调用该高阶组件就可以得到一个被装饰后的组件
    
*/

// Page1 想要一个页脚，和一个标题
function winthFooter(Com: any) {

    class Footer extends Component {

        state = {
            title: '非常大的标题'
        }

        render(): ReactNode {
            return <>
                <Com title={this.state.title}></Com>
                <footer style={{ backgroundColor: "#f66", height: 50 }}>页脚</footer>
            </>
        }
    }
    return Footer
}
// function Page1() {
//     return <>
//         <h1>页面 1</h1>
//         <Footer />
//     </>
// }
const Page1 = winthFooter((props: iProps) => {
    return <>
        <h1>页面 1 - {props.title}</h1>
    </>
})

const Page2 = winthFooter(() => {
    return <>
        <h1>页面2</h1>
    </>
})
export default class App extends Component {

    render() {
        return <>
            <div>
                <Page1></Page1>
                <hr />
                <Page2></Page2>
            </div>
        </>
    }

}